//商品信息前复选框的事件
window.onload = function() {
	var ckbox = document.getElementsByClassName("ckbox");
	var ckbtn = document.getElementsByClassName("ckbtn");
	var btnleft = document.getElementsByClassName("btnleft");
	var btnright = document.getElementsByClassName("btnright");
	var txt = document.getElementsByClassName("txt");
	var price = document.getElementsByClassName("price");
	var totle = document.getElementsByClassName("totle");
	var allprice = document.getElementsByClassName("totleprice")[0];
	var number = document.getElementsByClassName("number")[0];
	var count = 0;
	var tbody = document.querySelector("tbody")
	//请求接口
	$.ajax({
		type: "get",
		url: "http://localhost:9900/list",
		dataType: "json",
		success: function(response) {
			response.forEach(({
				shop
			}) => {
				tbody.innerHTML += `
				<tr>
					<td><input type="checkbox" class="ckbtn"></td>
					<td>
						<img src="${shop.imgurl}" class="face" align="left">
					</td>
					<td>
						${shop.shopname}
					</td>
					<td>
						<span class="oldprice" data-price="39.00">￥${shop.pic}</span>
					</td>
					<td>
						<span class="price" data-price="39.00">￥${shop.oldpic}</span>
					</td>
					<td class="btn">
						<button class="btnleft">-</button>
						<input class="txt" type="text" value="1">
						<button class="btnright">+</button>
					</td>
					<td>
						<span class="totle" data-totle="39.00">￥39.00</span>
					</td>
					<td><a href="" class="del">删除</a></td>
				</tr>
				`
			})

		},
	})
	$('.btndel').click=function () {
		console.log(1);
		$(this).parent('td').parent('tr').addClass("show")
	}
	
	for (var i = 0; i < ckbtn.length; i++) {
		ckbtn[i].onclick = function() {
			if (this.checked) {
				count++;
			} else {
				count--;
			}
			if (count == ckbtn.length) {
				ckbox[0].checked = true;
				ckbox[1].checked = true;
			} else {
				ckbox[0].checked = false;
				ckbox[1].checked = false;
			}
			ischoose();
		}
	}
	//全选复选框的事件
	for (key in ckbox) {
		ckbox[key].index = key; //给index属性上绑值，绑个索引
		ckbox[key].onclick = function() {
			ckbox[this.index == 0 ? 1 : 0].checked = !ckbox[this.index == 0 ? 1 : 0].checked;
			if (this.checked) {
				for (var i = 0; i < ckbtn.length; i++) {
					ckbtn[i].checked = true;
				}
			} else {
				for (var i = 0; i < ckbtn.length; i++) {
					ckbtn[i].checked = false;
				}
			}
			ischoose();
		}
	}
	//购物车数量的增减事件
	for (var i = 0; i < btnleft.length; i++) {
		btnleft[i].index = i;
		btnleft[i].onclick = function() {
			var val = txt[this.index].value;
			val--;
			if (val < 1) {
				val = 1;
			}
			txt[this.index].value = val;
			addprice(this.index, val);
			ischoose();
		}
		btnright[i].index = i;
		btnright[i].onclick = function() {
			var val = txt[this.index].value;
			val++;
			txt[this.index].value = val;
			addprice(this.index, val);
			ischoose();
		}
	}
	//金额的计算方法
	function addprice(index, value) {
		totle[index].innerHTML = "￥" + (price[index].getAttribute("data-price") * value).toFixed(2);
		totle[index].setAttribute("data-totle", (price[index].getAttribute("data-price") * value).toFixed(2));
	}
	//判断商品信息前的复选框是否打勾
	function ischoose() {
		var totleprice = 0;
		var num = 0;
		for (var i = 0; i < ckbtn.length; i++) {
			if (ckbtn[i].checked) {
				totleprice += parseFloat(totle[i].getAttribute("data-totle"));
				num += parseInt(txt[i].value);
			}
		}
		allprice.innerHTML = "￥" + totleprice.toFixed(2);
		number.innerHTML = num;
	}
}
